<template>
  <view class="page">
    <!-- 个人信息卡片 -->
    <view class="business-card" @click="toShareAi">
      <image class="bg-img" src="/static/biejing.png" mode="aspectFill" />
      <view class="info">
        <view class="name-section">
          <text class="name">高逊</text>
          <text class="slogan">董事长</text>
        </view>
        <view class="contacts">
          <view class="contacts-item">
            <text>引力琥珀人工智能</text>
          </view>
          <view class="contacts-item">
            <text>郑州引力琥珀人工智能科技有限公司</text>
          </view>
          <view class="contacts-item">
            <text> </text>
          </view>
        </view>
        <text class="service-title"> </text>
        <view class="service-content">
          <uni-icons
            type="phone"
            color=""
            size="16"

          />
          <text >13523432733</text>
        </view>

      </view>
      <button class="share-btn" open-type="share" @tap.stop="navigateToShare" v-if="userStore.userInfo?.is_lock">
        <image class="share-icon" src="/static/share.svg" mode="aspectFit" />
         <!-- <text class="shareiii" style="font-size: 25rpx;">分享</text> -->
      </button>
    </view>


    <!-- 功能卡片区域 -->
    <!-- <view class="card-container">
      <view class="card" @tap="navigateToCard">
        <text class="card-title" @click="toShareAi">企业名片</text>
      </view>
      <button class="share-button card-title" open-type="share" @tap="navigateToShare">
        <text>交换名片</text>
      </button>
      <view class="card" @click="showCompanyInfoPopup">
        <text class="card-title">企业信息</text>
      </view>

      <view class="card" @click="showPersonalInfoPopup">
        <text class="card-title">个人信息</text>
      </view>

    </view> -->
    <view class="card cartoon" @click="navigateToCard" >
      <text class="card-title" v-if="userStore.userInfo?.is_lock">训练我的智能体</text>
       <text class="card-title" v-else>敬请期待...</text>
    </view>
    <!-- 联系人列表 -->
    <!-- <view class="contact-list">
      <view class="contact-item" v-for="(item, index) in contacts" :key="index">
        <text class="initial">{{ item.initial }}</text>
        <view class="info">
          <text class="contact-name">{{ item.name }}</text>
          <view>
            <text class="contact-position">{{ item.position }}</text>
          </view>
        </view>
      </view>
    </view> -->
    <!-- 企业信息弹框 -->
    <!-- <CompanyInfoPopup ref="companyInfoPopupRef" @save="showCompanyInfoPopup" @cancel="hideCompanyInfoPopup" /> -->
    <!-- 个人信息弹框 -->
    <!-- <PersonalInfoPopup ref="personalInfoPopupRef" @save="showPersonalInfoPopup" @cancel="hidePersonalInfoPopup" /> -->
  
         <CustomTabBar />
     
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onMounted, onUnmounted } from 'vue'
import { usePurchasedStore } from '@/stores/purchased'
import { useUserStore } from '@/stores/user'
import { useCompanyStore } from '@/stores/company'
import { onShareAppMessage } from '@dcloudio/uni-app'
import CustomTabBar from '@/components/CustomTabBar.vue';
// import CompanyInfoPopup from '@/components/CompanyInfoPopup.vue'
// import PersonalInfoPopup from '@/components/PersonalInfoPopup.vue'
// 获取 store 实例
const purchasedStore = usePurchasedStore()
const userStore = useUserStore()
const companyStore = useCompanyStore()

// 模拟联系人数据
const contacts = ref([
  { initial: '张', name: '张大千', position: '一二三传媒 董事长' },
  { initial: '吕', name: '吕洞宾', position: '转职接待办 主任' },
  { initial: '黑', name: '黑无常', position: '亡魂捕捉事业部 执行人员' }
]);

const toShareAi = () => {
  if(!userStore.userInfo?.is_lock) return
  uni.navigateTo({
    url: '/pages/shareComAI/shareAi'
  })
}

// 定义接口
// interface Product {
//   id: string
//   name: string
//   image_url?: string
//   expire_time?: string
//   is_purchased: boolean
//   click_url?: string
//   status?: string
// }

// 导航方法
const navigateToCard = () => {
   if(!userStore.userInfo?.is_lock) return
  uni.navigateTo({
    url: '/pages/trainMyAgent/trainMyAgent'
  })
}

// 分享业务
const shareInfo = ref({
  title: 'AI企业神经触点',
  path: '/pages/shareComAI/shareAi', // 分享路径
  imageUrl: '', // 分享图片，将在生成后更新
  desc: '分享描述', // H5用
  // query: 'id=123' // 分享参数
})

const navigateToShare = async () => {
 
  if (!userStore.userInfo) {
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    })
    return
  }
  if (!purchasedStore.hasCompanyCard) {
    uni.showToast({
      title: '请先创建企业名片',
      icon: 'none'
    })
    return
  }

  // 显示加载提示
  uni.showLoading({
    title: '生成分享图片中...'
  })

  try {
    // 获取生成的分享图片
    const shareImage = companyStore.shareImage
    if (shareImage) {
      shareInfo.value.imageUrl = shareImage
      uni.hideLoading()
    } else {
      throw new Error('分享图片生成失败')
    }
  } catch (error) {
    console.error('分享图片生成失败：', error)
    uni.hideLoading()
    uni.showToast({
      title: '分享图片生成失败',
      icon: 'none'
    })
  }
}

// 生命周期钩子
onMounted(() => {
  purchasedStore.fetchPurchasedProducts()
})
// 小程序分享给朋友
onShareAppMessage(() => {
  return {
    title: shareInfo.value.title,
    path: `${shareInfo.value.path}`,
    imageUrl: shareInfo.value.imageUrl,  // 使用动态生成的图片，如果没有则使用默认图片
    success: () => {
      uni.showToast({
        title: '分享成功',
        icon: 'success'
      })
    },
    fail: () => {
      uni.showToast({
        title: '分享失败',
        icon: 'none'
      })
      uni.switchTab({
        url: '/pages/home/home'
      })
    }
  }
})
onUnmounted(() => {
  purchasedStore.stopAutoRefresh()
})
const shareName='高逊'
// 分享配置
defineExpose({
  onShareAppMessage() {
    return {
      title: `${shareName}的智能体`,
      path: '/pages/home/index'
    }
  }
})
// 企业信息弹框
const companyInfoPopupRef = ref()
const showCompanyInfoPopup = () => {
  if (!userStore.checkLoginStatus()) {
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    })
    return
  }
  console.log('Opening company info popup')
  companyInfoPopupRef.value?.open()
}

const hideCompanyInfoPopup = () => {
  console.log('Closing company info popup')
  companyInfoPopupRef.value?.close()
}

// 个人信息弹框
const personalInfoPopupRef = ref()
const showPersonalInfoPopup = () => {
  if (!userStore.checkLoginStatus()) {
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    })
    return
  }
  console.log('Opening personal info popup')
  personalInfoPopupRef.value?.open()
}

const hidePersonalInfoPopup = () => {
  console.log('Closing personal info popup')
  personalInfoPopupRef.value?.close()
}
</script>

<style scoped lang="scss">
/* 全局样式 */
.page {
  background-color: #1f2128;        
  color: #fff;
  padding: 20rpx;

   padding-bottom: 120rpx;

  height: 100%;
  min-height: 100vh;
  width: 100%;
  box-sizing: border-box;
}


/* 个人信息卡片 */
.business-card {
  position: relative;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom:30rpx;
  height: 350rpx;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  overflow: hidden;

  .bg-img {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
  }

  .info {
    position: relative;
    z-index: 1;
    width: 100%;
  }

  .name-section {
    display: flex;
    align-items: center;
    gap: 20rpx;
  }

  .name {
    font-size: 48rpx;
    color: #fff;
    font-weight: bold;
    margin-bottom: 15rpx;
    display: block;
  }

  .slogan {
    font-size: 28rpx;
    color: #fff;
    margin-bottom: 15rpx;
    display: block;
  }

  .contact {
    margin: 20rpx 0;
  }

  .contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;

    text {
      color: #fff;
      font-size: 28rpx;
    }
  }

  .service-title {
    color: #fff;
    font-size: 32rpx;
    font-weight: bold;
    margin-top: 30rpx;
    display: block;
  }

  .service-content {
    color: #fff;
    font-size: 28rpx;
    margin-top: 100rpx;
    display: block;
    gap: 5rpx;
  }
  .share-btn {
  position: absolute;
  right: 30rpx;
  bottom: 30rpx;
  width: 80rpx;
  height: 80rpx;
  border: none;
  // background: #fff;
  background-color: transparent ;
  border-radius: 50%;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
  z-index: 3;
  &::after {
    border: none;
  }
}
.share-icon {
  width: 60rpx;
  height: 60rpx;
  // display: block;
  fill: #ff9393;
  z-index: 2;
  // background: #333;
}
}
/* 功能卡片容器 */
.card-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30rpx;
  margin-top: 40rpx;
  width: 100%;
  padding: 0 20rpx;
  box-sizing: border-box;
  margin-bottom: 30rpx;
  flex-shrink: 0;
  /* 防止卡片区域被压缩 */
}

/* 单个功能卡片样式 */
.card,
.share-button {
  background: linear-gradient(to bottom right, #0f0f11, #2d333b);
  border-radius: 24rpx;
  padding: 0 30rpx;
  box-shadow:
    0 28rpx 60rpx rgba(74, 158, 255, 0.15),
    0 10rpx 20rpx rgba(95, 169, 244, 0.12),
    inset 0 0 10rpx rgba(255, 255, 255, 0.03);
  border: 1rpx solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #f0f4fa;
  height: 80rpx;
  /* 统一卡片高度为80rpx */

  &:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
}

/* 卡片图标样式 */
.card-icon,
.btn-icon {
  font-size: 48rpx;
  margin-bottom: 20rpx;
}

/* 卡片标题和描述 */
.card-title {
  font-size: 28rpx;
  color: #f0f4fa;
  font-weight: normal;
  text-align: center;
  line-height: 1;
}

.card-desc {
  font-size: 24rpx;
  color: #adbac7;
  text-align: center;
}

/* 分享按钮样式 */
.share-button {
  border: none;
  width: 100%;
  font-weight: normal;
  font-size: 28rpx;

  &::after {
    border: none;
  }

  text {
    font-size: 28rpx;
    color: #f0f4fa;
    font-weight: normal;
    text-align: center;
    line-height: 1;
  }
}

.cartoon {
  margin-left: 30rpx;
  margin-right: 30rpx;
  margin-bottom: 50rpx;
  background-color: #b86d6e;
}

/* 联系人列表 */
.contact-list {
  padding: 0rpx 25rpx;
}

.contact-item {
  background-color: #0f1114;
  border-radius: 16rpx;
  padding: 20rpx;
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}

.initial {
  font-size: 60rpx;
  font-weight: 500;
  width: 40rpx;
  text-align: center;
  margin-right: 20rpx;
}

.info {
  margin-left: 25rpx;
}

.contact-name {
  font-size: 28rpx;
  /* padding-bottom: 13rpx; */
}

.contact-position {
  font-size: 24rpx;
  color: #ccc;
}
</style>
